<template>
  <h1>toref和torefs</h1>

  <h4>obj对象</h4>
  <ul>
    <li>商品ID: {{ obj.id }}</li>
    <li>商品标题: {{ obj.title}}</li>
    <li>商品收藏数量: {{ obj.number }}</li>
  </ul>
  <button @click="changeObj">修改 obj 中的 number</button>

  <h4>newObj对象</h4>
    <ol>
        <li>商品ID: {{ newObj.id }}</li>
        <li>商品标题: {{ newObj.title }}</li>
        <li>商品收藏数量: {{ newObj.number }}</li>
    </ol>
  <button @click="changeNewObj">修改 newObj 中的 number</button>
</template>

<script setup>
import { toRef,toRefs,reactive } from "vue"

const obj = reactive({
  id:"QF001",
  number:10086,
  title:'一个商品的标题'
})
// console.log(obj)
// console.log(obj.id)
// console.log(obj.number)
// console.log(obj.title)
function changeObj () {
    obj.number--
}

const newObj = toRefs(obj);
// console.log(newObj)
// console.log(newObj.id.value)
// console.log(newObj.number.value)
// console.log(newObj.title.value)
function changeNewObj() {
    newObj.number.value++
}


// ========toRef========
// const obj = {
//   id:'qf001',
//   name:'张三'
// }

// const name1 = toRef(obj,'name')
// const name2 = obj.name
// console.log('toref',name1);
// console.log('toref',name1.value);
// console.log('obj.name',name2);


// // console.log('obj.id',obj.id)
// // console.log('obj.name',obj.name)

</script>